<template>
  <el-dialog
    title="增加伙伴"
    v-model="dialogVisible"
    width="520px"
    @close="handleClose"
    align-center
    center
    :append-to-body="true"
    :close-on-click-modal="false"
    class="customer-dialog">
    <div class="dialog-content">
      <el-form
        :inline="true"
        :model="form"
        label-position="top">
        <el-form-item label="伙伴层级">
          <el-select
            v-model="form.type"
            placeholder="请选择"> 
            <el-option
              label="一代"
              :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="伙伴官网账号">
          <el-input
            v-model="form.accountName"
            placeholder="请输入" />
          <span class="search" @click="search">搜索</span>
        </el-form-item>
        <el-form-item label="伙伴身份">
          <el-select
            v-model="form.realType"
            placeholder="请选择">
            <el-option
              label="个人"
              :value="0" />
            <el-option
              label="企业"
              :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="伙伴名称">
          <el-input
            v-model="form.nickname"
            disabled
            :placeholder="form.nickname" />
        </el-form-item>
        <el-form-item label="初次预充值金额">
          <el-select
            v-model="form.levelId"
            placeholder="请选择"
            @change="changeLevel">
            <el-option
              v-for="item in levelOptions"
              :key="item.id"
              :label="`${item.stepName}W-${item.levelName}`"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="加入日期">
          <el-date-picker
            v-model="form.partnerTime"
            type="date"
            placeholder="请选择"
            value-format="YYYY-MM-DD" />
        </el-form-item>
        <!-- <el-form-item label="折扣率">
          <el-input
            v-model="form.discountRatio"
            placeholder="选择预充值后自动设置"
            readonly />
        </el-form-item> -->
        <!-- <el-form-item label="激励比例">
          <el-input
            v-model="form.incentiveRatio"
            placeholder="选择预充值后自动设置"
            readonly />
        </el-form-item>
        <el-form-item label="加入日期">
          <el-date-picker
            v-model="form.partnerTime"
            type="date"
            placeholder="请选择"
            value-format="YYYY-MM-DD" />
        </el-form-item>
      -->
      </el-form>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button
          type="primary"
          @click="confirmFn">
          保存
        </el-button>
        <el-button @click="cancelFn">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
  import { ElMessage } from 'element-plus';
  import { getPolicySettingList, sendUpdateVerifyCode, getAgentInfo,addPartner } from '@/api/index';
  import { useUserStore } from '@/stores/user';
  const userStore = useUserStore();

  const props = defineProps({
    show: {
      type: Boolean,
      required: true
    },
    data: {
      type: Object,
      required: true
    }
  });

  const emit = defineEmits(['update:show', 'updateList']);

  const dialogVisible = computed({
    get() {
      return props.show;
    },
    set() {
      emit('update:show', false);
    }
  });

  let form = ref({
    accountName: '',
    realType: '',
    nickname: '伙伴名称',
    levelId: '',
    partnerTime: '',
    discountRatio: '',
    incentiveRatio: '',
    type:2
  });

  function changeLevel(e) {
    const findItem = levelOptions.value.find(item => item.id === e);
    if (findItem) {
      form.value.discountRatio = findItem.discountRatio;
      form.value.incentiveRatio = findItem.incentiveRatio;
    }
  }

  // 关闭
  function handleClose() {
    emit('update:show', false);
  }

  // 确认
  function confirmFn() {
    const { accountName, realType, nickname, levelId, partnerTime,type } = form.value;

    if (!accountName) {
      ElMessage.error('请输入伙伴官网账号');
      return;
    }
    if (realType === '') {
      ElMessage.error('请选择伙伴身份');
      return;
    }
    if (!nickname) {
      ElMessage.error('请输入伙伴名称');
      return;
    }
    if (!levelId) {
      ElMessage.error('请选择初次预充值金额');
      return;
    }
    if (!partnerTime) {
      ElMessage.error('请选择加入日期');
      return;
    }
    if (!type) {
      ElMessage.error('请选择伙伴类型');
      return;
    }
    if (props.data.type === 1) {
      //新增
      addPartner({
        accountName,
        levelId,
        // nickname,
        partnerLevel:type===1? 'GEN':'ONE',
        partnerTime,
        verifyType:realType?'ENTERPRISE':'PERSONAL',
      }).then(res => {
        ElMessage.success('保存成功');
        emit('updateList');
        handleClose();
      });
    }
  }
  // 查询代理商账号信息
  function search (){
    const parmaa = form.value.accountName
    console.log(parmaa)
    getAgentInfo(parmaa).then(res => {
      if (res.success) {
        form.value.nickname = res.data.nickname
      }
    });
  }


  // 取消
  function cancelFn() {
    emit('update:show', false);
  }

  let levelOptions = ref([]);
  function getLevelList() {
    getPolicySettingList({
      page: 1,
      pageSize: 20
    }).then(res => {
      const data = res.data.content;
      console.log(data);
      levelOptions.value = data;
      // levelOptions.value = data.filter(item => {
      //   return item.level === 1;
      // });
    });
  }

  onMounted(() => {
    getLevelList();

    if (props.data.type === 2) {
    }
  });
</script>

<style lang="scss" scoped>
  .dialog-content {
    .search{
      color: rgb(64, 76, 250);
      position: absolute;
      right: 10px;
      cursor: pointer;
    }
    .el-form {
      .el-input,
      .el-select {
        width: 200px;
      }

      :deep(.el-date-editor) {
        width: 200px;
      }

      .el-button {
        margin-left: 10px;
      }
    }
  }
</style>
